<script setup>
import { ref } from "vue";
import { httpRequest } from "../../utils/http";
import btnModule from "../../components/index/btnModule.vue"
import Nothing from "../../components/index/Nothing.vue";
import { onLoad } from "@dcloudio/uni-app";
const text = ref('')
const voiceList = ref([])
const getVoiceList = async() => {
    const res = await httpRequest('/api/getShopVoiceCopy6ByShopId','POST',{
        shopId:uni.getStorageSync("shop")[uni.getStorageSync("index")].shopId
    })
    voiceList.value = res.data
}
getVoiceList()
const lei = ref('')
onLoad((e)=>{
    if(e.publicity){
        lei.value = 'pub'
    }
    if(e.master){
        lei.value = 'master2'
    }
})
const getOk = () => {
    uni.showLoading({
        title: '请稍后'
    })
    text.value = text.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
    if(!text.value.trim())return uni.showToast({title:'请先输入口播内容',icon:'none'})
    if(!(/[\u4e00-\u9fa5a-zA-Z0-9]/.test(text.value)))return uni.showToast({title:'至少包含一个字',icon:'none'})
    uni.redirectTo({ url: `/pageA/index/section?text=${text.value}&lei=${lei.value}` })
    uni.hideLoading()
}

const intoId = ref('')
const clickItem = (e,i) => {
    uni.vibrateShort()
    intoId.value = i
    text.value = e.content

}

const into = ref()
const openInto = () => {
    into.value.open('bottom')
}
const close = () => {
    into.value.close()
}

const changeInput = (e) => {
    if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(text.value)) uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    text.value = text.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
    console.log(text.value);
}
</script>

<template>
  <view class="page">
    <view class="text">
        <fui-textarea 
            @confirm='changeInput'
            @click="changeInput"
            @blur="changeInput"
            @focus="changeInput"
            v-model="text"
            maxlength="100"
            height="532rpx"
            size="28"
            :borderTop="false"
            radius="16"
            :borderBottom="false"
            textareaBorder
            borderColor="rgb(220,223,230)"
            :padding="['30rpx','30rpx','30rpx','30rpx']"
            isCounter
            counterColor="rgb(144,147,153)"
            counterSize="24"
            placeholder-style="color:rgb(144,147,153)" 
            placeholder="请输入内容" />
            <text class="into" @click="openInto">导入</text>
    </view>
    <btnModule message="下一步" @customClick="getOk" />
  </view>
  <uni-popup ref="into">
    <view style="height: 1000rpx;background-color: #fff;border-radius: 32rpx 32rpx 0 0;">
        <view class="close">
            <image @click="close" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
            口播库
        </view>
        <Nothing v-if="!voiceList.length" />
        <view v-else class="content">
            <view class="item" 
            :class="intoId===index?'active':''" 
            @click="clickItem(item,index)" 
            v-for="item,index in voiceList" 
            :key="item.id">{{item.content}}</view>
        </view>
        <btnModule message="确认" @customClick="close"/>
    </view>
  </uni-popup>
</template>

<style lang="scss">
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(246,248,251);
        .text{
            width: 690rpx;
            height: 626rpx;
            position: absolute;
            top: 200rpx;
            left: 30rpx;
            .into{
                position: absolute;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 164rpx;
                height: 64rpx;
                border-radius: 302rpx;
                margin-top: 30rpx;
                font-size: 28rpx;
                color: rgb(142,84,244);
                border: 1px solid rgb(142,84,244);
            }
        }
    }
    .close {
        width: 100%;
        height: 108rpx;
        text-align: center;
        line-height: 108rpx;
        font-size: 32rpx;
        font-weight: 700;
        color: rgb(48, 49, 51);
        .close-btn {
          position: absolute;
          top: 30rpx;
          left: 30rpx;
          width: 48rpx;
          height: 48rpx;
        }
    }
    .content{
        padding: 30rpx;
        padding-bottom: 300rpx;
        height: 690rpx;
        overflow-y: scroll;
        .item{
            width: 690rpx;
            min-height: 224rpx;
            padding: 30rpx;
            box-sizing: border-box;
            background-color: rgb(249,249,249);
            border-radius: 16rpx;
            border: 1px solid transparent;
            font-size: 28rpx;
            color: rgb(69,70,74);
            margin-bottom: 30rpx;
        }
    }
    .active{
        border: 1px solid rgb(142,84,244) !important;
    }
</style>

